<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import {getVerifyCode,loginApi} from "@/api/user";
import {userStore} from "@/store/user";
import {useRouter} from "vue-router";
const store = userStore()
const router = useRouter()
//表单绑定对象
const loginModel = reactive({
  username:'admin',
  password:'666666',
  code:''
})
//表单ref属性
const loginRef = ref<FormInstance>()
//表单验证规则
const rules = reactive({
  username: [{ required: true, message: '请选择用户名', trigger: ['change', 'blur'] }],
  password: [{ required: true, message: '请填写密码', trigger: ['change', 'blur'] }],
  code: [{ required: true, message: '请填写验证码', trigger: ['change', 'blur'] }],
})
//获取验证码
const imgSrc = ref()
const getImage = async()=>{
  let res = await getVerifyCode()
  if(res && res.code==200){
      imgSrc.value = res.data
  }
}
//登录表单提交
const commit=()=>{
  loginRef.value?.validate(async (valid) => {
    if(valid){
        let res = await loginApi(loginModel)
      if(res && res.code==200){
        //存储用户信息，跳转首页
        store.setToken(res.data.token)
        store.setNickName(res.data.nickName)
        store.setUserId(res.data.userId)
        //跳转首页
        router.push({path:'/'})
      }
    }
  })
}
onMounted(() => {
  getImage()
})
</script>

<template>
  <div class="login">
    <el-form class="loginForm" :model="loginModel" ref="loginRef" :rules="rules" :inline="false" size="large">
      <el-form-item >
        <div class="loginText">系统登录</div>
      </el-form-item>
      <el-form-item prop="username">
        <el-input placeholder="请输入账户" v-model="loginModel.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="loginModel.password"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row style="width: 100%;">
          <el-col :span="16">
            <el-input placeholder="请输入验证码" v-model="loginModel.code"></el-input>
          </el-col>
          <el-col style="padding-left: 10px" :span="8">
            <img :src="imgSrc" @click="getImage" class="images">

          </el-col>
        </el-row>
      </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-button @click="commit" type="primary" class="btn">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="danger" plain class="btn">重置</el-button>
          </el-col>
        </el-row>


    </el-form>
  </div>
</template>

<style scoped lang="scss">
.login{
  height: 100vh;
  width: 100%;
  background-color: #ffffff;
  background-image: url("../../assets/login.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginForm{
  width: 400px;
  height: 320px;
  padding: 20px 35px;
  border-radius: 10px;
  background-color: #ffffff;
  .loginText{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #606226;
    width: 100%;
    font-size: 24px;
    font-weight: 600;
  }
  .images{
    height: 40px;
    width: 100%;
    cursor: pointer;
  }
  .btn{
    width: 100%;
  }
}
</style>